<template>
  <div class="hairdresser">
    <div class="hairdresser_service_package">
      <p class="hairdresser_p">服务项目</p>
      <div class="hairdresser_service_package_item" :class="{active:serviceItem==1}" @click="serviceItem=1">
        洗剪吹
      </div>
      <div class="hairdresser_service_package_item" :class="{active:serviceItem==2}" @click="serviceItem=2">
        烫染
      </div>
    </div>
    <p class="line" style="clear: both;"/>
    <div class="hairdresser_discount_package">
      <p class="hairdresser_p">优惠套餐</p>
      <div class="hairdresser_discount_package_item" :class="{active:discountItem==1}" @dblclick="discountItem=1" @click="$router.push('/hairdresserdetail')">
        <div class="discount_fuhao"><span>￥</span></div>
        <div class="discount_money"><span>35</span></div>
        <div class="discount_value"><span>洗剪吹1次，男女不限，发长不限</span></div>
      </div>
      <div class="hairdresser_discount_package_item" :class="{active:discountItem==2}" @dblclick="discountItem=2" @click="$router.push('/hairdresserdetail')">
        <div class="discount_fuhao"><span>￥</span></div>
        <div class="discount_money"><span>98</span></div>
        <div class="discount_value" style="width: 70%;"><span>洗剪吹1次，男女不限，发长不限洗剪吹1次，男女不限，发长不限洗剪吹1次，男女不限，发长不限</span></div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "HairDresser",
    data() {
      return {
        serviceItem: 1,
        discountItem: 1
      }
    }
  }
</script>

<style scoped>
  .hairdresser {
    background-color: #fff;
  }

  .hairdresser_p {
    font-size: 12px;
    color: #a0a0a0;
    margin: 15px 0 0 15px;
  }

  .hairdresser_service_package_item {
    border: 1px solid #ccc;
    color: #000;
    border-radius: 3px;
    margin: 10px 15px;
    height: 36px;
    line-height: 36px;
    width: 100px;
    text-align: center;
    float: left;
  }

  .active {
    border: none !important;
    background-color: #ff6633;
    color: #fff !important;
  }

  .hairdresser_discount_package_item {
    border: 1px solid #ccc;
    color: #333;
    border-radius: 3px;
    margin: 10px 15px;
    height: 48px;
  }

  .discount_fuhao {
    float: left;
    margin-left: 30px;
    margin-top: 17px;
    font-size: 14px;
  }

  .discount_money {
    float: left;
    margin-top: 15px;
    font-size: 18px
  }

  .discount_value {
    float: left;
    margin-top: 15px;
    margin-left: 10px;
    font-size: 14px;
    width: 70%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
</style>
